/**
 * Created by ysl on 2017/8/25.
 */
/*
* renderItem 设置的item，
* numColumns 设置每行返回的个数
* itemHight 设置每行item的高度
* ItemSeparatorComponent 设置Flalist的分割线
* list 数据列表
 * */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ToastAndroid,
    TouchableOpacity,
    Dimensions,
} from 'react-native';

import FlatListExample from './FlatListExample';
import {Titles} from "../Titles";

const {height, width} = Dimensions.get('window');

export default class FlatListTest extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            list: [],
        };
        for (let i = 0; i < 20; ++i) {
            this.state.list.push("" + i);
        }
        this.myList = [];
        for (let i = 0; i < 5; ++i) {
            this.myList.push("" + i)
        }
    }

    //_separator = () =>
    _separator() {
        return <View style={{height: 2, backgroundColor: 'yellow'}}/>;
    }

    finishFlatList() {
        this.props.navigation.goBack();
    }

    render() {
        return (

            <View style={styles.container}>
                <Titles style={styles.back}
                        backLast={() => this.finishFlatList()}
                        leftText="返回"
                        titleTexts="普通列表"
                        rightText="right"

                />

                <FlatListExample
                    style={styles.listview}
                    list={this.state.list}
                    ref="refMyList"
                    renderItem={(item) => this._renderItem(item)}//设置item
                    numColumns={3}//设置每行item的个数
                    itemHight={120}//设置每个item的高度
                    ItemSeparatorComponent={() => this._separator()}//设置item的分割线
                ></FlatListExample>

            </View>
        );
    }

    //<Text onPress={() => {
    //    this.refs.refMyList.setMyList(this.myList);
    //  }}
    //    style={styles.item}
    //    > 改变数组</Text>


    _renderItem(item) {
        let item1 = item;
        var txt = '第' + item1.index + '个' + ' title=' + item1.item;
        //var bgColor = item1.index % 2 == 0 ? 'red' : 'blue';
        //backgroundColor: bgColor,
        return (
            <TouchableOpacity onPress={() => {
                alert(txt);
            }}>
                <Text
                    style={[{flex: 1, height: 120, width: width / 2}, styles.txt]}>{txt}</Text>
            </TouchableOpacity>
        )
    }

    //处理列表item的点击事件
    _onItemClick(data, rowId) {

        ToastAndroid.show(data, ToastAndroid.SHORT);
        console.log("click  " + data + "  " + rowId)
    }

}


const styles = StyleSheet.create({
    listview: {
        flex: 1,
        justifyContent: "center",
    },
    back: {
        height: 49,
    },
    container: {
        flexWrap: "wrap",
        flexDirection: 'column',
        justifyContent: "center",
    },
    item: {
        width: 100,
        height: 200,
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',

        marginBottom: 5,
    },
});